import React, { useState } from 'react'
import './index.scss'
import { UserO,Star } from '@react-vant/icons';

export default function Collect() {
  const [isShowCollect,setIsshowCollect]=useState(true)
  const [listData,setListData]=useState([1,2,3,4])
  
  return (
    <>
      <div className="collect-box">
        {!isShowCollect &&(
          <div className="collect-box-null" >
            <div className="box-main-image">
              <img src="/public/image/null.png" alt="" />
            </div>
            <div className="box-content-word">
              <div className='collect-title-wrapper'>暂无收藏</div>
              <p>上边插图不可编辑，我们在您的保存列表中找不到任何内容！快去看看吧</p>
            </div>
            <button>看热门课程</button>
          </div>
        )}
        {
          isShowCollect && (
            <div className="collect-box-list">
              <div className="collect-box-header">我的收藏</div>
              {
              listData.map((item, index) => (
                <div className="collect-main-list" key={index}>
                  <div className="li-img-wrapper">
                    <img id='list-img' src='/public/image/null.png' alt="" />
                  </div>
                  <div className="li-main-wrapper">
                    <div className="li-main-title">插画画家视频教程适合所有的初学者</div>
                    <div className="li-main-person">在线课堂-Koto</div>
                    <div className="li-main-other">
                      <UserO /> 5k 学员
                      <Star color='#FFD700'/> 4.8
                    </div>
                  </div>
                </div>
                ))
              }
               <div className="button-container">
                <button>添加收藏</button>
              </div>
            </div>
          )
        }
      </div>
    </>
  )
}
